<template>
  <TableLayout
    :authorized="$hasPermissions(['system:icon:query'])"
  >
    <!-- 搜索表单 -->
    <template #search-form>
      <SearchForm class="window-search-form" ref="searchForm" :model="searchForm">
        <el-form-item label="图标名称" prop="name">
          <el-input v-model="searchForm.name" v-trim placeholder="请输入图标名称" @keypress.enter="search"/>
        </el-form-item>
        <template #buttons>
          <el-button
            type="primary"
            icon="Search"
            @click="search"
          >搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </template>
      </SearchForm>
    </template>
    <!-- 表格和分页 -->
    <template #table-wrap>
      <!-- v5.1.0，优化图标列表展示 -->
      <div class="toolbar">
        <el-button
          type="primary"
          icon="Plus"
          @click="$refs.operaIconWindow.open('新增图标')"
        >新增图标</el-button>
      </div>
      <div class="icon-list-wrap">
        <el-alert
          title="前端可使用IconSelect组件进行图标选择，使用Icon组件进行展示。"
          :closable="false"
          show-icon
        />
        <ul v-if="tableData.list.length > 0" class="icon-list">
          <li
            v-for="icon of tableData.list"
            :key="icon.id"
            v-clipboard:copy="getIconCode(icon)"
            v-clipboard:success="copySuccess"
            v-clipboard:error="copyFailed"
          >
            <Icon :value="icon.value" size="35px"/>
            <label>{{ icon.name }}</label>
            <div class="opera-wrap">
              <el-button
                type="primary"
                link
                size="small"
                @click.stop="$refs.operaIconWindow.open('编辑图标', icon)"
              >编辑</el-button>
              <el-button
                type="danger"
                link
                size="small"
                @click.stop="deleteById(icon)"
              >删除</el-button>
            </div>
          </li>
        </ul>
        <EmptyTip v-else/>
      </div>
    </template>
    <!-- 新建 & 编辑窗口 -->
    <!-- v5.1.0，success事件调整为 created 和 updated -->
    <OperaIconWindow
      ref="operaIconWindow"
      @created="search"
      @updated="refresh"
    />
  </TableLayout>
</template>

<script>
import BaseTable from '@/components/base/BaseTable.vue'
import OperaIconWindow from '@/components/system/icon/OperaIconWindow'
export default {
  extends: BaseTable,
  components: {
    OperaIconWindow
  },
  data () {
    return {
      // v5.1.0，覆盖表格数据，实现一次性最多加载500个图标
      tableData: {
        // 当前页数据
        list: [],
        // 分页
        pagination: {
          pageIndex: 1,
          pageSize: 500,
          total: 0
        }
      },
      // 搜索
      searchForm: {
        name: '',
        category: ''
      }
    }
  },
  methods: {
    // v5.1.0，获取组件代码
    getIconCode (icon) {
      return `<Icon value="${icon.value}"/>`
    },
    // v5.1.0，复制图标代码成功
    copySuccess () {
      this.$tip.success('复制成功')
    },
    // v5.1.0，复制图标代码失败
    copyFailed () {
      this.$tip.error('复制失败')
    }
  },
  async created () {
    this.config({
      module: '系统图标',
      'field.main': 'name',
      api: await import('@/api/system/icon'),
      sorts: []
    })
    this.search()
  }
}
</script>
<!-- v5.1.0，优化图标列表展示效果 -->
<style scoped lang="scss">
:deep(.table-wrap) {
  padding: 20px;
}
// 顶部操作按钮
.toolbar {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}
// 内容区域
.icon-list-wrap {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  // 提示
  .el-alert {
    margin-bottom: 10px;
  }
  // 图标列表
  .icon-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    li {
      width: 150px;
      flex-shrink: 0;
      box-sizing: border-box;
      padding: 30px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: var(--background-color);
      border-radius: 20px;
      position: relative;
      &:hover {
        .opera-wrap {
          opacity: 1;
        }
      }
      // 名称
      label {
        width: 100%;
        margin-top: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        color: var(--color-gray-deep);
      }
      // 操作按钮
      .opera-wrap {
        transition: all 0.3s;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        border-radius: 0 0 20px 20px;
        display: flex;
        justify-content: center;
        gap: 30px;
        padding: 8px 10px;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, 0.05);
        .el-button {
          margin: 0;
        }
      }
    }
  }
}
// 宽度自适应
// 1700px以上
@media screen and (min-width: 1700px) {
  .icon-list {
    width: 1270px !important;
  }
}
// 1500px至1700
@media screen and (min-width: 1500px) and (max-width: 1700px) {
  .icon-list {
    width: 1110px !important;
  }
}
// 196px至1500
@media screen and (min-width: 1296px) and (max-width: 1500px) {
  .icon-list {
    width: 950px !important;
  }
}
</style>
